<template>
  <div class="data-app-subscribe-page">
    <div class="header bg f-c">
      <div class="nav-box f-s">
        <div class="header-content">
          <Navbar />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="page-title">数据应用订阅申请</div>
      <el-card shadow="none">
        <h2>基本信息</h2>
        <div class="ctable-box">
          <table>
            <tr>
              <td class="tool_baco" colspan="1">应用名称</td>
              <td colspan="3" class="table_td">
                {{ detail.name }}
              </td>
            </tr>
            <tr>
              <td class="tool_baco">服务厂商</td>
              <td class="table_td" width="400"> {{ detail.serviceProviderName }}</td>
              <td class="tool_baco">提供部门</td>
              <td class="table_td" width="400"> {{ detail.createDeptName }}</td>
            </tr>
            <tr>
              <td class="tool_baco" colspan="1">工具介绍</td>
              <td colspan="3" class="table_td"> {{ detail.itselfDesc }}</td>
            </tr>
            <tr>
              <td class="tool_baco" colspan="1">功能描述</td>
              <td colspan="3" class="table_td">
                {{ detail.functionDesc }}
              </td>
            </tr>
            <tr>
              <td class="tool_baco" colspan="1">业务场景</td>
              <td colspan="3" class="table_td">
                {{ detail.businessDesc }}
              </td>

            </tr>
          </table>
          <table style="margin-top: 60px">
            <tr>
              <td class="tool_baco" colspan="1" style="padding-left: 85px;text-align: left">附件类型</td>
              <td colspan="1" class="tool_baco" style="padding-left: 85px;text-align: left">
                附件名称
              </td>
            </tr>
            <tr v-for="(item,index) in detail.files" :key="index">
              <td class="table_td" style="padding-left: 85px;text-align: left">{{ item.name }}</td>
              <td class="table_td" style="padding-left: 85px;text-align: left">
                <el-link>
                  <a :href="item.path" />
                </el-link>
              </td>
            </tr>
          </table>
        </div>
      </el-card>
      <el-card shadow="none">
        <h2>申请信息</h2>
        <el-form
          ref="subForm"
          label-position="top"
          :model="ruleForm"
          :rules="rules"
        >
          <el-row :gutter="64">
            <el-col :span="12">
              <el-form-item label="申请人：">
                <el-input disabled :value="userInfo.nickname" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请部门：">
                <el-input disabled :value="userInfo.deptName" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="64">
            <el-col :span="12">
              <el-form-item label="联系人姓名：">
                <el-input v-model="ruleForm.contactsName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="64">
                <el-col :span="12">
                  <el-form-item label="联系人办公电话：">
                    <el-input v-model="ruleForm.contactsTel" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系人手机号码：">
                    <el-input v-model="ruleForm.contactsMobile" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row :gutter="64">
            <el-col :span="12">
              <el-form-item label="技术联系人姓名：">
                <el-input v-model="ruleForm.technicianName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="64">
                <el-col :span="12">
                  <el-form-item label="技术联系人办公电话：">
                    <el-input v-model="ruleForm.technicianTel" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="技术联系人手机号码：">
                    <el-input v-model="ruleForm.technicianMobile" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="单位地址：">
                <el-input v-model="ruleForm.address" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="申请原因：">
                <el-input v-model="ruleForm.reason" type="textarea" resize="none" :rows="8" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="附件上传" prop="file">
              <DragUpload ref="dragRef" />
              <div class="upload-tips">请上传申请单盖章扫描件，<em>点击此处</em>可下载申请单模版</div>
            </el-form-item>
          </el-row>
          <el-form-item>
            <div style="text-align: center">
              <el-button type="primary" style="margin-right: 200px" @click="handleSubmit">确认提交</el-button>
              <el-button @click="handleBack">返回</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="footer">
      <div class="db-container">
        <div class="footer-item">
          <div class="footer-text">主板：xxx市政务服务数据管理局</div>
          <div class="footer-text">技术支持单位：xxx市大数据资源管理中心</div>
          <div class="footer-text">运营：xxx市XXXX科技发展集团有限公司</div>
        </div>
        <div class="footer-item" style="justify-content: center">
          <div class="footer-text">粵ICP备10001213213号码-7</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from '../layout/navbar'
import { http_common, http_shop_app } from '@/api'
import { mapGetters } from 'vuex'
export default {
  name: 'Index',
  components: {
    Navbar
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      detail: {
      },
      tabName: '2',
      ruleForm: {
        contactsName: '',
        contactsMobile: '',
        contactsTel: '',
        address: '',
        reason: '',
        technicianName: '',
        technicianMobile: '',
        technicianTel: ''
      },
      rules: {

      },
      fileList: []
    }
  },
  created() {
    const id = this.$route.params.id
    http_shop_app.read({ id }).then(res => {
      const data = res || {}
      if (!data.files) {
        data.files = []
      }
      this.detail = data
    })
  },
  methods: {
    handleSubmit() {
      this.$refs.subForm.validate(async(valid) => {
        if (valid) {
          const files = this.$refs.dragRef.getFiles()
          console.log(files)
          if (files) {
            http_shop_app.sub({
              businessId: this.$route.params.id
            }, {
              ...this.ruleForm,
              files
            }).then(res => {
            })
          }
        }
      })
    },
    handleBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
.data-app-subscribe-page {
  background-color: #f3f5f9;
  .upload-tips {
   em {
     color: #0052D9;
     font-style: normal;
     cursor: pointer;
   }
  }
  .el-card {
    margin-bottom: 60px;
  }
  .el-card__body {
    padding: 40px;
  }
  .ctable-box {
   table {
     width: 100%;
     border-spacing: 0px;
     border: 1px solid #E5E9F2;
     border-collapse: collapse;
   }
    tr {
      height: 60px;
      border: 1px solid #E5E9F2;
    }
    .tool_baco {
      background: #f9faff;
      width: 200px;

      color: #333333;
    }
    td {
      overflow: hidden;
      color: #333333;
      border: 1px solid #E5E9F2;
      line-height: 36px;
      font-size: 18px;
      padding-left: 85px;
      text-align: left
    }
    .table_td {
      padding-left: 10px;
      color: #333333;
    }
  }
  .content {
    width: 1400px;
    margin: 0 auto;
    .page-title {
      font-size: 30px;
      font-weight: bold;
      color: #3d72ff;
      margin: 20px 0;
    }
    h2 {
      margin-bottom: 30px;
    }
  }
  .footer {
    width: 100%;
    background: #e6ecf5;
    height: 100px;
    padding: 23px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .footer-item {
      width: 730px;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      .footer-text {
        font-size: 12px;
        color: #7a7a7a;
      }
    }
  }
  .header {
    width: 100%;
    background-image: url("~@/assets/shop/head.jpg");
  }
  .nav-box {
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  }
  .header-content {
    width: 1400px;
    margin: 0 auto;
    padding: 20px 0;
  }
  .nav-box2 {
    width: 1400px;
    height: 350px;
    margin: 0 auto;
    .el-input,
    .el-button {
      height: 60px;
      .el-input__inner {
        height: 60px;
        line-height: 60px;
      }
    }
    .title {
      font-size: 48px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      margin-bottom: 34px;
      font-style: oblique;
    }
    .record-list {
      height: 19px;
      cursor: pointer;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 21px;
      span {
        position: relative;
        padding-right: 40px;
      }
      span::after {
        position: absolute;
        content: " ";
        height: 16px;
        width: 1px;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        margin: 0 15px;
        background-color: #ffffff;
      }
      span:last-child:after {
        display: none;
      }
    }
    .el-input-group__append,
    .el-button {
      color: #ffffff !important;
      background-color: #0052d9 !important;
      border-color: #0052d9 !important;
    }
  }
  .count-box {
    margin: 0 auto;
    width: 750px;
    .count-item {
      .count {
        font-size: 36px;
        color: #fff;
        line-height: 36px;
        text-align: center;
      }
      .count-name {
        color: #cfd6e6;
        font-size: 18px;
        margin-top: 18px;
        text-align: center;
      }
    }
  }
}
</style>
